<template>
    <div class="subjectDetail" style="font-size: 14px;">
        <scroller>
            <div>
                <div class="header">
            <img src="https://static.shengxue985.com/oss/pic/20190127/12/4fe1e6aabda7430ea778a51ac7bf9fa3.jpg" alt="">
            <div class="imgWord">
                <h4>{{topicName}}</h4>
            </div>
        </div>
        <div class="summary">
            <p>除了仅凭高考文化分录取外，高校还有许多其他的录取方式，大家应该提前了解，尽早准备。（持续更新中，后续课程敬请期待）</p>
            <div class="line"></div>
        </div>
        <div class="main">
            <ul class="main_ul">
                <li :class="item.commodityType==1 ? 'active' : 'main_li'" v-for="item in subjectList" :key="item.id" @click="toggle(item)">
                  <p>{{item.commodityName}}</p>
                  <div class="imgBoxList">
                    <div class="videobtn"></div>
                    <div v-for="img in item.pics" :key='img' class="imgBoxInfo">
                      <img :src="img" alt="" >
                    </div>
                  </div>
                </li>
            </ul>
        </div>
            </div>
        </scroller>
            <downLoad :hasShare="hasShare"></downLoad>
    </div>
</template>

<script>
  import Vue from 'vue'
  import VueScroller from 'vue-scroller'
  Vue.use(VueScroller)
  import api from '../api'
  import {toast} from "../toast"
  import downLoad from './../components/common/download/downLoad.vue'
  import { format	} from './../utils/filter'


  export default {
    name: 'question',
    components: {
      downLoad
    },
    data() {
      return {
        // lessonId:'',
        hasShare: true,
        appId: "wx921f8ebbe6ced2c2",
        wxSharePic: "https://static.shengxue985.com/oss/20180830/e5089c21aa9249e0bd121f7a7e21b582.png",
        // token:'eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJhcHAyNjkyNzEiLCJ1c2VySWQiOiIyNjkyNzEiLCJmcm9tIjoiYXBwIiwibmJmIjoxNTU0MjUzMzU5fQ.LXpdpoXMThYS2HCxr_gni883SZsuNI--Roqbme2k83n0_y2_-ipe049DHqF8obFZKY-Om5Qm0QEQwFbFaQcjdu5BQyEU_ThDU6EwQFYcDl9RalYpEI-hDGsQa0QaXlIv75UzZtuUQFD7hTWU27aV2L89Cnf1NsFTM8WF-yGE7G4',
        showLoading: true,
        topicName:'',
        summary:'',
        viewCount:'',
        commoditiesPage:{
            total:''
        },
        subjectList:[]
      }
    },
    mounted() {
      this.questionDescri()
    },
    created () {
      this.id = this.$route.query.id
      // this.hasShare = this.$route.query.hasShare

      window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", this.hengshuping, false);
      this.secondShare(true, {
        url: window.location.href,
        appId: this.appId, // 必填，公众号的唯一标识
      });
    },
    methods: {
      // 点击跳转到详情页面
      toggle: function(item) {
          if(item.commodityType==2){
            this.$router.push({path:'/courseDetail-h5',query:{id:item.id}});
          }else if(item.commodityType==1){
            const cid = {id : item.id}
              this.getCourseInfos(cid);
          }

    },
    // 通过商品id获取课程id，因为视频播放需要课程id才能播放，
    getCourseInfos(cid){
      api.getCourseDetail(cid).then(res=>{
          if(res.data.code==0){
            this.lessonId = res.data.data.lessonsVOList[0].id;
            this.$router.push({path:'/lessonShare',query:{cid:cid.id,lessonId:this.lessonId,hasShare:true,isappinstalled:0}});
            // from=singlemessage&isappinstalled=0
          }else{
            toast(res.data.message)
          }
        }).catch(err => {
					toast(err);
      });
    },
    
      //二次分享
      secondShare(hasData, params) {
        api.getSecondShareKey(params).then(res => {
          if (res.data.code == 0) {
            let data = res.data.data;
            wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: data.appId, // 必填，公众号的唯一标识
              timestamp: data.timestamp, // 必填，生成签名的时间戳
              nonceStr: data.nonceStr, // 必填，生成签名的随机串
              signature: data.signature, // 必填，签名，见附录1
              jsApiList: [
                "chooseImage",
                "previewImage",
                "uploadImage",
                "downloadImage",
                "checkJsApi",
                "onMenuShareTimeline",
                "onMenuShareAppMessage",
                "onMenuShareQQ",
                "onMenuShareWeibo"
              ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
            this.wxShare(hasData, {
              // title: this.title || "邀您查看提问详情", // 分享标题
              title: "邀您查看提问详情", // 分享标题
              desc: "升学在线,学习超给力", // 分享描述
              link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: this.wxSharePic, // 分享图标
              type: "", // 分享类型,music、video或link，不填默认为link
              dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
              success: function() {
                // 用户确认分享后执行的回调函数
              },
              cancel: function() {
                // 用户取消分享后执行的回调函数
              }
            });
          } else {
          }
        })
        .catch(err => {
        });
      },
      wxShare(hasData, config) {
        let c;
        if (!hasData) {
          c = {};
          c.title = "邀您查看提问详情";
          c.desc = "升学在线,学习超给力";
          (c.link = window.location.href), (c.imgUrl = this.wxSharePic);
        } else {
          c = config;
        }
        if (location.hash == "#debug") {
          alert(JSON.stringify(c));
        }
        wx.ready(function() {
          wx.onMenuShareAppMessage(c);
          wx.onMenuShareTimeline(c);
          wx.onMenuShareQQ(c);
          wx.onMenuShareWeibo(c);
        });
      },
      questionDescri () {
        const params = {
            id: parseInt(this.id),
            pageNo: 1,
            pageSize: 15,
            refreshed: 0
        }
        this.showLoading = true;
        api.getSubjectDetail(params).then((res)=> {
          if (res.data.code == 0) {
            this.showLoading = false;
            const data = res.data.data;
            this.topicName = data.topicName; 
            this.summary = data.summary;
            this.viewCount = data.viewCount;
            this.commoditiesPage = data.commoditiesPage;
            this.subjectList = data.commoditiesPage.list;
            this.commoditiesPage.total = data.commoditiesPage.total;
          }
        }).catch(err=> {
        })
      }
    }
  } 

</script>

<style lang="scss" scoped>
@import "../styles/mixin.scss";
.subjectDetail{
    list-style: none;
    width: 100%;
    background: #fff;
    .header{
        position: relative;
        width: 100%;
        height: 200px;
        overflow: hidden;
        img{
            width: 100%;
            filter: blur(5px);
        }
        .imgWord{
            width: 100%;
            position: absolute; 
            top:50%;
            left: 50%;
            transform: translate(-50%,-30%);
            color: #fff;
            h4{
                max-width: 67%;
                font-size: 20px;
                text-align: center;
                margin: 0 auto;
            }
            p{
                font-size: 16px;
                text-align: center;
                margin: 20px auto 0;
            }
            
        }
        
    }
    .summary{
        width: 100%;
        background-color: #fff;
        p{
            margin: 10px;
        }
        .line{
          width: 100%;
          height: 7px;
          background-color: #eee;
        }
    }
    .main{
        padding: 10px;
        .main_ul{
            width: 100%;
            .active{
              padding: 10px 0;
                border-bottom: 1px solid #ccc;
                p{
                  padding-bottom: 5px;
                }
                .imgBoxList{
                  height: 200px;
                  width: 100%;
                  position: relative;
                  .videobtn{
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    background-image: url('../../static/videobtn.png');
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-size: 25%;
                  }
                  .imgBoxInfo{
                      margin: 0 3px;
                      height: 100%;
                    flex: 1;
                    img{
                      width: 100%;
                      height: 100%;
                    }
                  }
                }
            }
            .main_li{
              padding: 10px 0;
                border-bottom: 1px solid #ccc;
                p{
                  padding-bottom: 5px;
                }
                .imgBoxList{
                  height: 100px;
                  width: 100%;
                  display: flex;
                  justify-content: space-between;
                  .imgBoxInfo{
                      margin: 0 3px;

                    flex: 1;
                    img{
                      width: 100%;
                      height: 100%;
                    }
                  }
                }
            }
        }
    }
}
</style>
